<!--
  @Description:活动页楼层配置
  @Author: zqy
  @Date: 2020-08-01 10:48:20
  @Last Modified by:   zqy
  @Last Modified time: 2020-08-01 10:48:20
 -->
<template>
  <div class="qup-full-page" style="padding:0">
    <edit
      v-if="showEdit"
      :page-show.sync="showEdit"
      :act-page-data="basicData"
      :category-data="categoryData"
      :floor-sort="tableData.length"
      :floor-data="editData"
      @success="handleSubmitSuccess"
    />

    <inside-page v-show="!showEdit" :titles="['帮助中心页面管理', `楼层配置【${basicData.pageName}】`]" @go-back="goBack">
      <div class="floor-page">
        <el-form size="mini" inline label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="页面名称:">
                {{ basicData.pageName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="页面图标:">
                <img v-if="basicData.iconUrl" :src="basicData.iconUrl | filterImageUrl" class="cate_img">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!editAble">
            <el-col :span="12">
              <el-form-item label="修改时间:">
                {{ basicData.lastUpdateTime | fiterTime }}
              </el-form-item>
              <el-form-item label="修改人员:">
                {{ basicData.lastUpdateBy }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间:">
                {{ basicData.createTime | fiterTime }}
              </el-form-item>

              <el-form-item label="创建人员:">
                {{ basicData.createBy }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="floor_table">
          <div class="dlg-title">
            <div>
              <el-alert
                v-if="editAble"
                title="可拖动楼层进行排序"
                type="info"
                show-icon
                :closable="false"
                effect=""
              />
            </div>
            <div>
              <el-button v-if="editAble" type="primary" size="mini" @click="handleEdit">新增楼层</el-button>
              <!-- <el-button v-if="showQrCodeButton" type="primary" size="mini" @click="handlePreview">页面预览</el-button> -->
            </div>
          </div>
          <div class="table-list-box">
            <el-table
              style="width: 100%"
              :data="tableData"
              header-row-class-name="table-list-header"
              highlight-current-row
              border
              row-key="id"
            >
              <el-table-column slot="before" label="序号" type="index" />
              <el-table-column prop="storeyName" label="楼层名称" />
              <el-table-column label="楼层类型">
                <template v-slot="{row}">
                  {{ row.storeyType | filterFloorType }}
                </template>
              </el-table-column>
              <el-table-column label="楼层布局">
                <template v-slot="{row}">
                  {{ row.layoutType | filterFloorLayout(row.storeyType) }}
                </template>
              </el-table-column>
              <el-table-column v-if="editAble" label="操作" width="130">
                <template v-slot="{row,$index}">
                  <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                  <el-button type="text" class="btn-del" @click="handleDel(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </inside-page>
    <qr-code-dlg v-if="showQrCode" :visible.sync="showQrCode" :image-url="pageQrcodeImg" />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Edit from './Edit'
import QrCodeDlg from './component/QrCodeDlg'
import Sortable from 'sortablejs'
import { queryCategoryTree, getPageQrcode } from '../api/helpCenter'
import { getActPageFloorList, delActPageFloor, updateActPageFloorSort, queryActPageFloorDetail } from '../api/floor'
import { FLOOR_TYPE, FLOOR_LAYOUT } from './constData'
export default {
  name: 'MmsActivityPageFllor',
  components: { Edit, QrCodeDlg },
  filters: {
    fiterTime: parseTime,
    filterFloorType(val) {
      return FLOOR_TYPE[val] || ''
    },
    filterFloorLayout(val, type) {
      const list = FLOOR_LAYOUT.filter(v => {
        return v.dictCode === val && v.type === type
      })
      return list.length ? list[0].dictName : ''
    }
  },
  props: {
    pageShow: {
      type: [Boolean, String],
      default: false
    },
    basicData: {
      type: [String, Object],
      default: ''
    },
    editAble: {
      type: Boolean,
      default: false
    }, // 是否可编辑
    showQrCodeButton: {
      type: Boolean,
      default: false
    } // 是否显示预览按钮
  },
  data() {
    return {
      tableData: [], // 表格数据
      showEdit: false,
      editData: '', // 编辑楼层详情数据
      showQrCode: false, // 是否显示二维码
      pageQrcodeImg: '', // 页面预览的二维码图片(base64)
      categoryData: [] // 类目树
    }
  },
  computed: {
    nowPageShow: {
      get() {
        return this.pageShow
      },
      set(val) {
        this.$emit('update:pageShow', val)
      }
    }
  },
  created() {
    this.initTableData()
    this.getCategoryTree()
    // this.getQrcodeImage()
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop()
    })
  },
  methods: {
    initTableData() {
      getActPageFloorList(this.basicData.id).then(res => {
        this.tableData = res.data || []
        this.showQrCodeButton = true
      })
    },
    goBack() {
      this.nowPageShow = false
    },
    getCategoryTree() {
      queryCategoryTree().then(res => {
        this.categoryData = res.data || []
      })
    },
    // 楼层新增/编辑
    handleEdit(row) {
      if (row && row.id) {
        queryActPageFloorDetail(row.id).then(res => {
          this.editData = res.data || ''
          this.floorBasic = {
            floorType: row.storeyType,
            floorLayout: row.layoutType
          }
          this.$nextTick(() => {
            this.showEdit = true
          })
        })
      } else {
        this.editData = ''
        this.$nextTick(() => {
          this.showEdit = true
        })
      }
    },
    handleSubmitSuccess() {
      this.initTableData()
    },
    // 页面预览
    async handlePreview() {
      if (this.tableData.length <= 0) {
        this.$message.warning('无法预览，请先维护楼层信息')
        return
      }
      if (!this.pageQrcodeImg) {
        await this.getQrcodeImage()
      }
      this.showQrCode = true
    },
    async getQrcodeImage() {
      await getPageQrcode(this.basicData.id).then(res => {
        if (res.success === 1) {
          this.pageQrcodeImg = 'data:image/png;base64,' + res.msg
        }
      })
    },
    // 删除行
    handleDel(row) {
      this.$confirm(`此操作将删除楼层【${row.storeyName}】,是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delActPageFloor(row.id).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.initTableData()
          }
        })
      })
    },
    // 行拖拽排序
    rowDrop() {
      const el = document.querySelector('.floor_table .el-table__body-wrapper tbody')
      Sortable.create(el, {
        disabled: !this.editAble, // 是否禁用拖拽
        // handle: '.allowDrop', // 指定行可拖拽
        ghostClass: 'selected-highlight', // 拖拽样式
        animation: 300, // 拖拽延时
        // 拖拽开始
        onStart: (e) => {},
        // 拖拽移动
        onMove: (e) => {},
        // 拖拽结束
        onEnd: ({ newIndex, oldIndex }) => {
          if (newIndex === oldIndex) return
          const currRow = this.tableData.splice(oldIndex, 1)[0]
          this.tableData.splice(newIndex, 0, currRow)
          this.handleSort()
        }
      })
    },
    handleSort() {
      const params = this.tableData.map((v, index) => {
        return {
          id: v.id,
          seq: index + 1
        }
      })
      updateActPageFloorSort(params).then(res => {
        if (res.success === 1) {
          this.initTableData()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .cate_img{
    width: 70px;
    height: 70px;
    // object-fit: cover;
    object-fit: contain;
  }

  .floor-page {
    margin-top: 20px;
  }
  .dlg-title{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .msg{
      color: #999;
    }
  }

  /deep/ .el-alert{
    padding:0;
    color: #999;
    .el-alert__title{
      font-size: 12px;
    }
  }
  /deep/ .btn-del{
    margin-left: 10px !important;
  }

</style>
